<template>

    <div class="background-box" :style="{backgroundColor:getBcColor}">
        <div class="background-menu"
            >
            <el-switch
                    v-model="obj.notShowMenu"
                    active-color=" #42b983"
                    inactive-color="gray"
                    :width="100"
                    active-text="收缩菜单"
                    inactive-text="展开菜单"
                    style="margin-bottom: 50px;"
            >
            </el-switch>

            <el-menu default-active="1"
                     class="el-menu-vertical-demo"
                     @close="handleClose"
                     :collapse="!obj.notShowMenu"
                     :unique-opened="true"
                     active-text-color="rgb(66,185,131)"
            >
                <el-submenu :index="String(index+1)" v-for="(item,index) in obj.menu" >
<!--                    标栏-->
                    <template  #title>
                        <i :class="item.icon"></i>
                        <span >{{item.title}}</span>
                    </template>


                    <el-menu-item-group>
                        <el-menu-item :index="(index+1)+'-'+dex" v-for="(i,dex) in item.child" >
                            <router-link :to="i.link" style="display: inline-block;width: 100%;height: 100%;text-decoration: none;color: gray">
                                {{i.title}}
                            </router-link>

                        </el-menu-item>

                    </el-menu-item-group>

                </el-submenu>
                <el-menu-item @click="outLogin">
                    <i class="el-icon-switch-button"></i>
                    <template #title>退出登陆</template>
                </el-menu-item>
            </el-menu>
            <div style="width: 100px;margin-top: 30px;color:white" class="flex-center-col">
                <div style="margin-bottom: 10px">更换背景</div>
                <el-color-picker v-model="obj.backColor">

                </el-color-picker>
            </div>

        </div>

        <div class="background-view-box" >
            <router-view style="height: 100%;"></router-view>
        </div>
    </div>
</template>

<script>
    import {computed, reactive} from "@vue/reactivity";
    import {goTop, successMessage} from "@/assets/js/utils";
    import {onMounted} from "@vue/runtime-core";
    import {useRouter} from "vue-router";

    export default {
        name: "Background",
        setup(){
            let router=useRouter()

            let obj=reactive({
                backColor:"",
                activeName:'1',
                notShowMenu:true,
                menu:[
                    {
                        title:'文章',
                        name:'1',
                        icon:'el-icon-tickets',
                        child:[
                            {
                                title:'添加文章',
                                link:'/insert',
                            },
                            {
                                title:'管理文章',
                                link:'/bc/artController',

                            }
                        ]
                    },
                    {
                        title:'账号',
                        name:'2',
                        icon:'el-icon-user-solid',
                        child:[
                            {
                                title: '管理个人信息',
                                link: '/bc/userController'
                            }
                        ]
                    },
                    {
                        title:'日志',
                        name:'3',
                        icon:'el-icon-notebook-1',
                        child:[
                            {
                                title: '添加日志',
                                link: '/bc/insertLog'
                            },
                            {
                                title: '日志管理',
                                link: '/bc/logController'
                            }

                        ]
                    },
                    {
                        title:'标签',
                        name:'4',
                        icon:'el-icon-collection-tag',
                        child:[
                            {
                                title: '添加标签',
                                link: '/bc/insertTab'
                            },
                            {
                                title: '管理标签',
                                link: '/bc/tabController'
                            },

                        ]
                    },
                    {
                        title:'资源',
                        name:'5',
                        icon: 'el-icon-coin',
                        child:[
                            {
                                title: "添加资源",
                                link: "/bc/insertResource"
                            },
                            {
                                title: "管理资源",
                                link:'/bc/resController'
                            },
                            {
                                title: "上传资源",
                                link:'/bc/updateFile'
                            },
                            {
                                title: "静态资源管理",
                                link:'/bc/staticResource'
                            }


                        ]
                    },
                    {
                        title:'音乐',
                        name:'6',
                        icon:'el-icon-service',
                        child:[
                            {
                                title:"音乐",
                                link: "/bc/music"
                            },
                            {
                                title:"添加音乐",
                                link: "/bc/insertMusic"
                            }

                        ]
                    },
                    {
                        title:'其他',
                        name:'7',
                        icon:'el-icon-s-tools',
                        child:[
                            {
                                title:"网站信息",
                                link: "/bc/webInfo"
                            }

                        ]
                    }
                ]
            })

            let outLogin=()=>{
                let s=confirm("确定退出?")
                if(s){
                    localStorage.removeItem("token")
                    successMessage("退出成功")
                    router.push("/index")
                }

            }
            let getBcColor=computed(()=>{
                // 初始化背景颜色时
                if(obj.backColor ===''){
                    let color = localStorage.getItem("bcColor")
                    // 如果本地有颜色
                    if(color){
                        obj.backColor = color
                    }
                }else{
                    localStorage.setItem("bcColor",obj.backColor)
                }
                return obj.backColor


            })
            onMounted(()=>{
                goTop()
            })

            return{
                obj,
                handleClose:function () {

                },
                getBcColor,
                outLogin
            }
        }
    }
</script>

<style scoped lang="less">
    .background-box{
        width: 100%;
        height: 2000px;
        min-height: 2000px;
        background-color: var(--theme-color);
        display: flex;
        /*align-items: center;*/
        margin: 0;
        padding: 80px 0 0 0 ;


        .background-menu{


            height: 90%;
            margin-left: 10px;


            .menu-item{

                width: 100%;
                height: 100%;
                transition: all 1s;
                a{
                    width: 100%;
                    height: 100%;
                    text-decoration: none;
                    color:black;
                }
            }
            .menu-item:hover{
                background-color: #42b983;
            }

        }
        .background-view-box{

            width: 1100px;
            height:100%;
            margin-left: 50px;
            border-radius: 5px;
            overflow: hidden;


        }
    }
</style>